import React from 'react';
import {
  Container,
  Grid,
  Col,
  Icon,
  Group,
} from 'amazeui-touch';

export default class PullDownSelect extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.selectOption = this.selectOption.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    if(this.props.onOpenClick)
      this.props.onOpenClick.apply(this);
  }
  selectOption(e,item){
    e.preventDefault();
    if(this.props.onSelect)
      this.props.onSelect.apply(this,[item]);
  }
  getSelectedName(){
    if(!this.props.options.length) return "";
    return this.props.options.find((optionItem)=>{
      return optionItem.val==this.props.val;
    }).name
  }
  render() {

    let menu = (
      <div>
        <div onClick={this.handleClick}>
          <Icon name={this.props.isOpen?'up':'down'} className='p-icon'></Icon>
          {this.getSelectedName()}
        </div>
        {this.props.isOpen&&<div className="optionArea" style={{width:document.body.clientWidth,left:this.offsetLeft}}>
        {this.props.options.map((optionItem, index) => {
            return (
              <div className={(optionItem.val==this.props.val?'optionItem active':'optionItem')} key={index} onClick={(e) => this.selectOption(e,optionItem)}>{optionItem.name}</div>
            );
          })}</div>
        }
      </div>
    );
    return <div className="pull-down-select">{menu}</div>;
  }
}
